<template>
  <div class="Notice">
    <headerNav></headerNav>
    <div class="notice">
      <div class="left">公告</div>
      <van-swipe
        style="height: 16px"
        vertical
        :autoplay="3000"
        indicator-color=" transparent"
      >
        <van-swipe-item v-for="(item, index) in banner" :key="index"
          ><div class="right">
            <div class="nickname">{{ item.nickname }}</div>
            <div class="midden">刚参加了活动</div>
            <div class="name">
              {{ item.name }}
            </div>
          </div></van-swipe-item
        >
      </van-swipe>
    </div>

    <div class="title">热门活动上线中</div>

    <div class="events" v-for="(item,index) in events" :key="index">
      <div class="img">
        <img :src="item.image" alt="" />
      </div>

      <div class="content">
        <div class="left">
          {{item.name}}
        </div>
        <div class="right">立即参与 <i class="iconfont icon-jiantou"></i></div>
      </div>
    </div>

    <div class="title">往期回顾</div>

    <div class="events" v-for="item in ended" :key="item.id">
      <div class="img">
        <img :src="item.image" alt="" />
      </div>

      <div class="content">
        <div class="left">
          {{item.name}}
        </div>
        <div class="right">立即参与 <i class="iconfont icon-jiantou"></i></div>
      </div>
    </div>

    <footNav> </footNav>
  </div>
</template>




<script>
import footNav from "../base/footNav.vue";
import headerNav from "../base/headerNav.vue";

import { getNotice } from "../../api/home";
export default {
  data() {
    return {
      notice: null,
      banner: null,
      events: null,
      ended: null,
    };
  },
  methods: {
    getNoticeFun() {
      getNotice().then((data) => {
        this.notice = data.data;
        this.banner = data.data.banner;
        this.events = data.data.ongoing.events;
        this.ended = data.data.ended.events;
        console.log(this.ended);
      });
    },
  },
  created() {
    this.getNoticeFun();
  },

  components: {
    headerNav,
    footNav,
  },
};
</script>



<style lang="less">
.Notice {
  .notice {
    display: flex;
    height: 40px;
    background: #f5f5f5;
    margin: 20px 16px;
    margin-top: 5px;
    align-items: center;
    .left {
      margin: 0 7px;
      text-align: center;
      width: 26px;
      height: 16px;
      background: #ffc436;
      font-size: 10px;
      color: #240000;
      font-weight: bold;
    }
    .right {
      display: flex;
      font-size: 14px;
      font-weight: bold;
      margin-top: -1px;
      .midden {
        margin: 0 4px;
        font-weight: initial;
      }
      .name {
        width: 175px;
        overflow: hidden;
        height: 18px;
      }
      .nickname {
        width: 28px;
        overflow: hidden;
        height: 18px;
      }
    }
  }
  .title {
    margin: 0 16px;
    margin-bottom: 18px;
    font-size: 18px;
    font-weight: bold;
  }
  .events {
    .img {
      height: 194px;
      margin: 0 16px;
      border-radius: 5px;
      background: #000;
      img {
        height: 194px;
      
        border-radius: 5px;
      }
    }
    .content {
      display: flex;
      align-items: center;
      margin: 0 16px;
      margin-top: 13px;
      margin-bottom: 30px;
      .left {
        font-size: 14px;
        font-weight: bold;
        line-height: 23px;
      }
      .right {
        width: 86px;
        padding-left: 20px;
        font-size: 12px;
        font-weight: bold;
        color: #36786c;
        .iconfont{
          
        font-size: 12px;
        }
      }
    }
  }
}
</style>